.home-userqueue{

  .userqueue-header{
    height: 180px;
    background: #666699 url(../lib/img/fullscreen.jpg) no-repeat center center;
    background-size:100% auto;
    .header-content{
      width:1000px;
      margin:0 auto;
      position: relative;
      .data-type{
        position: absolute;
        top:60px;
        padding-left:35px;
        width:200px;
        height:70px;
        i{
          display: block;
          width:24px;
          height:24px;
          position: absolute;
          left:0;
          top:0;
          background: url(./image/assets.png) -128px 0 no-repeat;
        }
        i:hover{
          background-position: -128px -24px;
        }
        .data-value{
          font-size: 30px;
          height: 34px;
          line-height: 32px;
          font-style: italic;
          color: #FFF;
          text-shadow: 1px 1px 10px rgba(102,102,153,.75);
        }
        .data-name{
          font-size: 14px;
          color: #336;
        }

      }
      .item1{
        left:100px;
      }
      .item2{
        left:400px;
      }
      .item3{
        left:700px;
      }
    }
  }


  .userqueue-title{
    height:50px;
    line-height: 50px;
    text-align: center;
    position: relative;
    font-size:16px;
    a{
      position: absolute;
      right:0;
      bottom:0;
      font-size:14px;
      font-weight: 500;
      color:#ff9c3f
    }
  }
  .queue-container{
    padding:50px 70px;
    border:1px solid #d8dce5;
    .queue-content{
      height:30px;
      line-height: 30px;
      .queue-type{
        float: left;
        width:100px;
        color:#666699;
      }
    }
    .queue-data-bar{
      height:28px;
//      background: #666699;
      position: relative;
      width:700px;
      float: left;
      .data-item{
        top:0;
        height:28px;
        position: absolute;
        box-sizing: border-box;
        border-right:1px solid #fff;
        z-index: 2;
        line-height: 28px;
        color:#fff;
        text-align: center;
      }
      .data-item:hover{
        height:32px;
        top:-2px;
      }
      .data-other{
        background: #666699;
      }
      .data-self{
        background: #ff9c3f;
//        border-right:1px solid #ff9c3f;
      }
      .tip{
        position: absolute;
        top:-60px;
        left:100px;
        height:58px;
        line-height: 25px;
        width:200px;
        z-index: 5;
        text-align: center;
        .day{
          color:#ff9c3f;
          font-size:16px;
          padding:0 2px;
        }
      }
      .self-tip{
        background: url(./image/tip2.png) no-repeat center center;
      }
      .other-tip{
        background: url(./image/tip1.png) no-repeat center center;
        color:#666699;
      }
    }
    .queue-money{
      .progress{
        height: 30px;
        background: url(./image/arrow.png) no-repeat center center;
        .progress-content{
          height:30px;
          margin-left:100px;
          .tomorrow,.after-tomorrow{
            height:30px;
            width:350px;
            float: left;
            border-right:2px solid #666699;
            box-sizing: border-box;
            .day-bg{
              height:14px;
              background: #bdd3f5;
            }
            .day-text{
              text-align: center;
              font-size:12px;
              margin-top:5px;
              color:#666699;
            }
          }
          .tomorrow{
            border-left:2px solid #666699;
          }
          .more-day{
            height:15px;
            width:40px;
            background: url(./image/point.png) no-repeat center center;
            float: left;
          }
        }
      }
    }
    .queue-people{
      margin-top:90px;
      .queue-data-bar{
        .tip{
          line-height: 50px;
        }
      }
    }
    .explain{
      padding-top:50px;
      width:300px;
      margin:0 auto;
      .self-explain{
        float: left;
        height:20px;
        line-height: 20px;
      }
      .other-explain{
        float: right;
        height:20px;
        line-height: 20px;
      }
      i{
        display: inline-block;
        width:16px;
        height:16px;
        background: #ff9c3f;
        float: left;
      }
      span{
        display: inline-block;
        line-height: 16px;
        float: left;
        margin-left:5px;
      }
      .self-explain-icon{
        background: #ff9c3f;
      }
      .other-explain-icon{
        background: #666699;
      }
    }
  }
  .estimate{
    padding-top:50px;
    padding-bottom:70px;
    .estimate-content{
      width:450px;
      margin:0 auto;
      .self-time{
        float: left;
        background: url(./image/c1.png) no-repeat 0 center;
        padding-left:30px;
        height: 30px;
        line-height: 30px;
        font-size:15px;
      }
      .average-time{
        float: right;
        background: url(./image/c2.png) no-repeat 0 center;
        padding-left:30px;
        height: 30px;
        line-height: 30px;
        font-size:15px;
      }
      .data{
        font-size:25px;
        padding:0 3px;
      }
      .self-data{
        color:#ff9c3f;
      }
      .average-data{
        color:#666699;
      }
    }
  }
  .noqueue-tip{
    width:1000px;
    margin:30px auto;
    line-height: 200px;
    text-align: center;
    color:#666699;
    font-size:18px;
  }
  .queue-explain{
    width:1000px;
    margin:0 auto;
    border-top:1px solid #cccccc;
    padding-top:50px;
    margin-bottom:100px;
    background: url(./image/person.png) no-repeat right bottom;
    .explain-text{
      width:530px;
      h3{
        padding:0 0 15px 0;
        color:#666699;
        font-size:16px;
      }
      p{
        text-indent: 20px;
        line-height: 22px;
      }
    }
  }
}